import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       age:12
    }
  }
  _change=()=>{
    this.setState({age:13})
  }
  render() {
    return (
      <div>
        <h1>this is father</h1>
        <h2>my son Tom age is {this.state.age}</h2>
        <button onClick={this._change}>change name</button>
        <hr/>
        <Son name="Tom" age={this.state.age}/>
      </div>
    )
  }
}

class Son extends Component {
  constructor(props) {
    super(props)
    //this.state={age:this.props.age}
  }
  _change=()=>{
    this.setState({age:13})
  }
  
  render() {
    return (
      <div>
        <h3>this is Son,my name is :{this.props.name}</h3>
        <h4>my age is :{this.props.age}</h4>
        <button onClick={this._change}>change age</button>
      </div>
    )
  }
}

